<template>
  <page-card title="机构分组"
             :need-back="true">
    <div class="group-list">
      <div class="group-list-tools">
        <a-row type="flex"
               style="margin-bottom:20px"
               justify="start">
          <a-col flex="1">
            <a-button type="primary"
                      icon="plus"
                      action
                      @click="handleEdit('')">
              新增
            </a-button>
          </a-col>
        </a-row>
      </div>
      <div class="group-list-panel">
        <a-table :columns="columns"
                 :data-source="dataList"
                 :rowKey="(record, index) => index"
                 @change="handleTableChange"
                 :pagination="pagination">
          <span slot="action"
                slot-scope="text, record">
            <template>
              <a @click="handleEdit(record.groupsId)">编辑</a>
            </template>
            <a-divider type="vertical" />
            <template>

              <a-popconfirm title="确定要删除吗？"
                            ok-text="是"
                            cancel-text="否"
                            @confirm="handleDelete(record.groupsId)">
                <a href="javascript:;">删除</a>
              </a-popconfirm>
            </template>
            <a-divider type="vertical" />
            <template>
              <a @click="handleDeactivate(record.groupsId,record.statusBool)">
                {{ record.statusBool==true?'停用':'启用' }}
              </a>
            </template>
          </span>
        </a-table>
      </div>
    </div>
    <!-- 新增/编辑 -->
    <a-modal v-model="modalUnitVisible"
             :title="modalUnitTitle"
             destroyOnClose
             width="70%"
             style="z-index:10003;height:550px"
             ok-text="确定"
             cancel-text="取消"
             :footer="null">
      <div class="border">
        <UnitGroupEdit :groupsId="groupsId"
                       :groupOrderNo="groupOrderNo"></UnitGroupEdit>
      </div>
    </a-modal>
  </page-card>
</template>

<script>

import { PAGINATION } from '../../constants'
import UnitGroupEdit from './UnitGroupEdit.vue'
import { getCodeListByCode } from '../../api/dictionary/index'
import { deleteGroup, updateGroupStatus, getGroupPageList, init } from '../../api/unit/group'

export default {
  name: 'UnitGroupList',
  components: { UnitGroupEdit },
  provide () {
    return {
      updateModalShow: this.updateModalShow
    }
  },
  data () {
    return {
      pagination: PAGINATION,
      page: {
        currPage: 1,
        pageSize: 10
      },
      dataList: [
      ],
      columns: [
        {
          title: '名称',
          align: 'center',
          dataIndex: 'unitName',
          ellipsis: true,
          scopedSlots: { customRender: 'tl' }
        },
        {
          title: '分类',
          align: 'center',
          dataIndex: 'unitTypeName',
          ellipsis: true
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'statusText'
        },
        {
          title: '操作',
          width: 200,
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      modalUnitVisible: false,
      modalUnitTitle: '新增',
      groupsId: '',
      statusBool: '',
      groupOrderNo: null,
      typeList: [] // 分类数组
    }
  },
  watch: {
    modalUnitVisible (val) {
      if (val == false) {
        this.getUnitGroupList()
      }
    }
  },
  created () {
    this.getUnitGroupList()
  },
  methods: {
    updateModalShow (show) {
      this.modalUnitVisible = show
    },
    // 分类
    getTypeName (key) {
      getCodeListByCode({ code: 'GGLX' })
        .then((res) => {
          this.typeList = res
        })
    },
    // 机构分组列表
    getUnitGroupList () {
      this.getTypeName('GGLX')
      this.page.currPage = this.pagination.current
      this.page.pageSize = this.pagination.pageSize
      getGroupPageList(this.page).then((res) => {
        this.dataList = []
        this.pagination.current = res.currPage
        this.pagination.total = res.totalCount
        this.pagination.pageSize = res.pageSize
        res.list.forEach((item) => {
          let type = this.typeList.filter((i) => i.dictKey == item.groupType)
          this.dataList.push({
            groupsId: item.groupsId,
            unitUserId: item.unitUserId,
            unitName: item.groupName,
            unitTypeName: type[0].dictValue,
            unitType: item.groupType,
            statusBool: item.status,
            statusText: item.status === '1' ? '启用' : '停用'
          })
        })
      })
    },
    // 新增/编辑
    handleEdit (id) {
      if (id) {
        this.modalUnitTitle = '编辑'
      } else {
        this.modalUnitTitle = '新增'
      }
      this.groupsId = id
      this.modalUnitVisible = true
    },
    // 删除
    handleDelete (id) {
      deleteGroup(id).then((res) => {
        // this.message.info('删除成功！')
        this.getUnitGroupList()
      })
    },
    // 停用
    handleDeactivate (id, status) {
      updateGroupStatus(id).then((res) => {
        // this.message.info(status ? '停用成功！' : '启用成功！')
        this.getUnitGroupList()
      })
    },
    handleTableChange (pagination, filters, sorter) {
      this.pagination = pagination
      this.getUnitGroupList()
    }
  }
}
</script>

<style lang="less" scoped>
</style>